<script setup>
</script>

<template>
  <main>
    <h1>路由复习</h1>
    <p>路由的创建：下载vue-router，解析出createRouter，传入配置对象：history选项用来设置路由模式，routes选项用来指定路由对象，数组形式</p>
    <p>路由对象的配置：path确定路由地址，name确定路由别名，component用来指定当前路由对应的组件，redirect用来设置重定向，alias用来指定路由别名</p>
    <p>路由跳转：标签式（router-link的to属性），编程式（router.push）</p>
    <p>获取router对象，模板中：$router，选项式API中：this.$router，组合式API中：先引入useRouter方法，执行后，创建router对象</p>
    <p>路由渲染：router-view</p>
    <p>二级路由：给当前路由对象添加children属性，值为数组（类似于routes数组）</p>
    <p>动态路由：params，query</p>
    <p>params数据：配置路由对象（/xxx/:id）</p>
    <p>params数据的传输：/xxx/001</p>
    <p>query数据：不需要配置</p>
    <p>query数据的传输：/xxx?id=001</p>
    <p>解析路由数据：获取当前路由对象（模板中：$route，选项式API中：this.$route），组合式API中：先引入useRoute方法，执行后，创建route对象</p>
    <p>params数据：route.params.id</p>
    <p>query数据：route.query.id</p>
    <p>命名视图：一个路由对应多个组件，给router-view使用name属性起名，在相应的路由对象内将component改成components以键值对的形式注册组件，键名为要渲染到的router-view的name值</p>
    <p>路由守卫：全局，局部，组件</p>
    <p>全局：创建路由对象时添加：router.beforeEach()</p>
    <p>局部：配置某个路由对象时添加：beforeEnter()</p>
    <p>组件：选项式：beforeRouteEnter()，beforeRouteUpdate()，beforeRouteLeave()；组合式：onBeforeRouteUpdate()，onBeforeRouteLeave()，且在使用之前先引入</p>
    <p>路由传参的配置：</p>
    <p>路由的元数据：</p>
    <p>路由的模式：</p>

  </main>
</template>
